<template>
	<transition name="fade">
		<view ref="appDialog" class="appDialog" v-if="dialogVisible" @touchmove.prevent @click="cancelPop($event)">
			<view class="appDialog-shadow"></view>
			<view
				class="appDialog-content"
				@click.stop
				:style="{
					background:bg,
					width: computedWidth,
					height: computedHeight
				}"
			>
				<view class="appDialog-header">
					<view class="appDialog-title">
						{{ title }}
					</view>
					<view class="appDialog-close" v-if="isClose" @click="close()">
						<u-icon name="close" color="#666" size="40"></u-icon>
					</view>
				</view>
				<view class="appDialog-body">
					<slot></slot>
				</view>
				<slot name="footer" v-if="isFooter">
					<view class="appDialog-footer">
						<view class="appDialog-buttongourp">
							<view @click="dialogVisible = false" plain class="appDialog-buttongourp-cancel">取消</view>
							<view @click="confirm" type="primary" class="appDialog-buttongourp-confirm">{{confirmText}}</view>
						</view>
					</view>
				</slot>
			</view>
		</view>
	</transition>
</template>

<script>
export default {
	components: {},
	props: {
		title: String,
		confirmText: {
			default: '确定',
			type: [ String]
		},
		width: {
			default: 400,
			type: [Number, String]
		},

		height: {
			default: undefined,
			type: [Number, String]
		},
		isCancel: {
			default: false,
			type: Boolean
		},
		isFooter: {
			default: true,
			type: Boolean
		},
		isClose: {
			default: true,
			type: Boolean
		},
		bg:{
		default: '#fff',
		type: String	
		}
	},
	computed: {
		computedWidth() {
			if (this.width.indexOf('%') != -1) {
				return this.width;
			} else if (!isNaN(parseFloat(this.width))) {
				return this.width + 'rpx';
			} else {
				return this.width;
			}
		},
		computedHeight() {
			if (this.height) {
				if (this.height.indexOf('%') != -1) {
					return this.height;
				} else if (!isNaN(parseFloat(this.height))) {
					return this.height + 'rpx';
				}
			}
		}
	},
	data() {
		return {
			dialogVisible: false
		};
	},

	methods: {
		async open() {
			this.dialogVisible = true;
			await this.$nextTick();
		},

		confirm() {
			this.$emit('confirm');
		},

		close() {
			this.dialogVisible = false;
			this.closed();
			this.$emit('cancel');
		},

		closed() {
			Object.assign(this.$parent.$data, this.$parent.$options.data.call(this.$parent));
		},

		cancelPop() {
			if (this.isCancel) {
				this.close();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.appDialog {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	background-color: rgba($color: #000000, $alpha: 0.8);

	&-content {
		width: 400rpx;
		border-radius: 6rpx;
		box-sizing: border-box;
		padding: 4rpx 20rpx 20rpx 20rpx;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		height: fit-content;
		///background-color: #fff;
		animation-name: content-show;
		animation-duration: 0.4s;
		// overflow: hidden;
	}

	&-header {
		margin-right: 0;
		height: 80rpx;
		display: flex;
		align-items: center;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	&-footer {
		display: flex;
		width: 100%;
		justify-content: center;
		// align-items: center;
		padding-top: 40rpx;
	}

	&-buttongourp {
		display: flex;
		width: 100%;
		justify-content: space-around;
		&-button {
		}
		&-cancel {
			@include btn();
			background: #fff;
			border: 1rpx solid #999;
			color: #999;
		}
		&-confirm {
			@include btnMain();
		}
	}

	&-title {
		position: relative;
     
		font-size: 34rpx;
		color: #333;
	}

	&-close {
		// color: color.$base;
		cursor: pointer;
	}
}

@keyframes content-show {
	0% {
		opacity: 0;
		transform: translateY(-20rpx);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.fade-enter-active,
.fade-leave-active {
	transition: opacity 0.25s ease;
}

.fade-enter-from,
.fade-leave-to {
	opacity: 0;
}
</style>
